<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js canvas - lines - colors</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				background-color: #000000;
				margin: 0px;
				overflow: hidden;
			}
			#container{
			width: 600px;
			height: 500px;
			
			color: #fff;
				top: 10px;
				text-align: center;
				z-index: 100;
				background-color:#afd;
				display:block;
/* 				float:left; */
/* 				border-right: 1px red solid; */
			}
		</style>
	</head>
	<body>
	
	<div id="container"></div>
		<script src="three.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/effects/OutlineEffect.js"></script>
		<script src="js/libs/dat.gui.min.js"></script>
		<script src="js/controls/TrackballControls.js"></script>
		<script src="js/geometries/hilbert3D.js"></script>
		<script src="js/renderers/Projector.js"></script>
		<script src="js/renderers/CanvasRenderer.js"></script>
		<script src="me/jquery.min.js"></script>
		<script>
		var container;
		var camera, scene, renderer, controls, effect;
		var dom = $("#container");
		var width = dom.width();
		var height = dom.height();
//			var width = window.innerWidth;
//			var height = window.innerHeight;
		
		init(dom);
		animate();
		function init( dom ) {
			container = dom[0];
			camera = new THREE.PerspectiveCamera( 40, width/height, 1, 20000 );
			camera.position.set( 0.0, 400, 400 * 3.5 );
			var urls = ["5.jpg",	"3.jpg",	"6.jpg",	"4.jpg",	"2.jpg","1.jpg"];
			var reflectionCube = new THREE.CubeTextureLoader()
				.setPath( 'img/' )
//					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
				.load( urls );
			reflectionCube.format = THREE.RGBFormat;
			scene = new THREE.Scene();
			scene.background = reflectionCube;
			scene.add( new THREE.AmbientLight( "#eeeeee") );//环境光源
				
				
				
				 var geometry_line = new THREE.Geometry();   //声明一个几何体
	            var material_line = new THREE.LineBasicMaterial({ color: 0xffff00,linewidth: 10,});   //定义材质外观
	//    		var material_line = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 5, vertexColors: THREE.VertexColors } );
	//    				var material_line = new THREE.LineBasicMaterial( { color: 0xffff00, linewidth: 5, vertexColors: THREE.VertexColors } );
	            var point = new THREE.Vector3(0,0,0);
	            var point2 = new THREE.Vector3(100,100,500);
	            geometry_line.vertices.push(point); //vertices属性里可以存放点对象
	            geometry_line.vertices.push(point2); //vertices属性里可以存放点对象
	            var line1 = new THREE.Line(geometry_line, material_line);    //定义一条线
	            scene.add(line1);   //加入场景里
	            
	            
	            renderer = new THREE.CanvasRenderer();
				//renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( width,height );
				container.appendChild( renderer.domElement );
				renderer.gammaInput = true;
				renderer.gammaOutput = true;
			}

			function animate() {
				requestAnimationFrame( animate );
				render();
			}

			function render() {

				renderer.render(scene, camera );

			}

		</script>
	</body>
</html>
